<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts</title>
    <script src="../plugins/echarts/echarts.js"></script>
    <script src="../js/axios.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">

    axios.get("/categoryReport/category1Count.do?date1=2019-01-25&date2=2019-04-16").then(res=>{
        let list = res.data;
        // 所有的商品名称
        let names = [];
        // 销量所需要用到的集合
        let nums = [];// {value:xx,name:xx}
        // 销售额所需要用到的集合
        let moneys = [];
        for (let i = 0; i < list.length; i++) {
            names.push(list[i].name);
            // 自定义对象   new 类
            let num={value:list[i].num,name:list[i].name};
            nums.push(num);
            let money={value:list[i].money,name:list[i].name};
            moneys.push(money);
        }


        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title : {
                text: '商品类目销售分析',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: names
            },
            series : [
                {
                    name: '销售量',
                    type: 'pie',
                    radius : '35%',
                    center: ['30%', '50%'],
                    data:nums,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
                {
                    name: '销售额',
                    type: 'pie',
                    radius : '35%',
                    center: ['80%', '50%'],
                    data:moneys,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


    })


</script>

</body>
</html>